<!-- 组件 -->
<template>
  <div class="line" :style="lineStyle"></div>
</template>

<script>
export default {
  name: '',
  props: {
    type: {
      type: String,
      default: 'solid',
    },
    spacing: {
      type: String,
      default: '2px',
    },
    breadth: {
      type: String,
      default: '8px',
    },
    lineHeight: {
      type: String,
      default: '1px',
    },
    lineColor: {
      type: String,
      default: 'rgba(255, 255, 255, 0.6)',
    },
  },
  data() {
    return {};
  },
  computed: {
    lineStyle() {
      if (this.type == 'dashed') {
        return (
          'height:' +
          this.lineHeight +
          ';' +
          'background-image: linear-gradient(to right, ' +
          this.lineColor +
          ' 0,' +
          this.lineColor +
          this.breadth +
          ', transparent ' +
          this.spacing +
          ');background-size: calc(' +
          this.breadth +
          ' + ' +
          this.spacing +
          ') ' +
          this.lineHeight +
          ';'
        );
      } else if (this.type == 'solid') {
        return (
          'height:' +
          this.lineHeight +
          ';' +
          'background-image: linear-gradient(to right,' +
          this.lineColor +
          ' 0,' +
          this.lineColor +
          ' 100%);'
        );
      } else {
        return 'border-top: 1px dotted ' + this.lineColor;
      }
    },
  },
  components: {},
};
</script>

<style scoped>
.line {
  width: 100%;
  background-repeat: repeat-x;
}
</style>
